<gm:page title="News" authenticate="false" onload="load()">
  <!--
  Yahoo! New + Poly9 FreeEarth Mashup 
                          made by YangLe 2008-5-24
  -->
  
  <style type="text/css">
    #gm-signin {display:none;}
    #newsListWrapper, #map {margin-top: 10px;}
    #newsListWrapper {float:left; width:28%; margin-left:2%;}
    #helpInfo {color:#aaa; font-weight:bold; padding:0.5em;}
    #map {float:right; margin-right:2%;}
    .post {padding:0.5em 1em;}
    .post * {margin:0; padding:0;}
    .post .title {margin-bottom:1em;}
    .post .summary img {padding-right:1em;}
  </style>
    
  <script type="text/javascript" src="http://freeearth.poly9.com/api.js"></script>
  <script type="text/javascript">    
    var map;
    
    function onMapLoad() {
      this.setTargetLatLng(new FE.LatLng(34.68491,112.47605));
      this.getLayerManager().addLayer(new FE.Layer.DayNight());
    }

    function load() {
      map = new FE.Map(document.getElementById('map'));
      map.onLoad = onMapLoad;
      map.load();
    }
  
    function show(entry) {
      var lat = parseFloat(new GPath("geo:lat").getValue(entry));
      var lng = parseFloat(new GPath("geo:long").getValue(entry));
      var title = new GPath("atom:title").getValue(entry);
      var summary = new GPath("atom:summary").getValue(entry);
      var link = new GPath("atom:link[@rel='alternate']/@href").getValue(entry);
      var bubbleHtml = 
        ['<div class="post">', 
           '<h3 class="title">', '<a href="', link, '" target="_blank">', title, '</a>', '</h3>',
           '<div class="summary">', summary, '</div>',
         '</div>'
         ].join('');
      var loc = new FE.LatLng(lat, lng);
      var icon = new FE.Icon('http://freeearth.poly9.com/images/camera.png');
      map.panTo(loc, 3, 'easeoutelastic');
      var marker = new FE.Pushpin(loc, icon);
      map.addOverlay(marker);
      marker.openInfoWindowHtml(bubbleHtml, 480, 200);
      map.removeOverlay(marker);    
    }  
  </script>
  
  <div id="newsListWrapper">
    <gm:list id="newsList" data="http://ws.geonames.org/rssToGeoRSS?feedUrl=http://rss.news.yahoo.com/rss/world" pagesize="20" template="newsTemplate">
      <gm:handleEvent event="select" execute="show(event.entry);" />
    </gm:list>  
    <div id="helpInfo">Click entries above for more details.</div>
  </div>  
  
  <div id="map" style="width:66%; height:540px;"></div>

  <gm:template id="newsTemplate">
    <table class="blue-theme">
      <thead>
        <tr>
          <th>Latest World News</th>
        </tr>
      </thead>
      <tbody>
        <tr repeat="true">
          <td><gm:text ref="atom:title" /></td>
        </tr>
      </tbody>
    </table>
  </gm:template>
</gm:page>